<template lang="html">
  <div class="lrcContainer">
    <div class="lrc" ref="lrc" v-show="isShow">
      <li
        :class="{active:parseInt(currentTime) >= keyArr[index] && parseInt(currentTime) < keyArr[index+1]}"
        v-for="(item,key,index) in lrcData"
        :key="key">
        {{ item }}
        {{ srcollLrc(key,index) }}
      </li>
    </div>
  </div>
</template>

<script>
export default {
  name: "lrc",
  data() {
    return {
      isShow: false,
      lrc: "",
      lrcData: {}, // 存放处理后的歌词数组
      keyArr: []
    };
  },
  props: {
    // MusicPlayer传过来的歌曲id
    songId: {
      type: [String, Number],
      default: ""
    },
    currentTime: {
      type: [String, Number],
      default: 0
    },
    durationTime: {
      type: [String, Number],
      default: 0
    }
  },
  activated() {
    // console.log('actived:总时长',this.durationTime,'当前时长',this.currentTime);
    // 歌词部分重叠
    // 当重新渲染页面，如果切歌了，清空歌词列表
    if (this.$route.params.songId) {
      this.lrcData = {},this.keyArr = [],this.lrc = "",this.isShow = false;
      const lrcUrl = this.HOST + `/lyric?id=${this.$route.params.songId}`;
      this.$axios
        .get(lrcUrl)
        .then(res => {
          this.lrc = res.data.lrc.lyric;
          if (this.lrc == null) {
            this.$refs.lrc.innerText = "找不到歌词~";
            return;
          }
          this.isShow = true;
          // console.log('请求成功：总时长',this.durationTime,'当前时长',this.currentTime);
          this.lyricFormat();
          // console.log(this.lrcData);
          this.getAllKey();
        })
        .catch(error => {
          console.log("LRC报错", error);
        });
    }
  },
  methods: {
  // 数据格式处理
    lyricFormat() {
      let lyricArr = this.lrc.split('[').slice(1);
      let lrcObj = {};
      lyricArr.forEach(item => {
        let arr = item.split(']');
        let m = parseInt(arr[0].split(':')[0]);
        let s = parseInt(arr[0].split(':')[1]);
        arr[0] = m * 60 + s;
        if(arr[1] != '\n'){
          lrcObj[arr[0]] = arr[1];
        }
      })
      this.lrcData = lrcObj;
    },
  // 转成key数组
     getAllKey() {
      for (var i in this.lrcData) {
        this.keyArr.push(i);
      }
    },
  // 歌词滚动
    srcollLrc(key, index) {
      const lrcDiv = this.$refs.lrc;
      if ( // 大于当前时间点  并 小于下一个时间点 时滚动
        key < this.currentTime &&
        key > this.currentTime - (this.keyArr[index + 1] - this.keyArr[index])
      ) {
        lrcDiv.style.top = -((index - 2) * 30) + "px";
      }
    }
  }
};
</script>

<style scoped>
.lrcContainer {
  width: 100%;
  height: 250px;
  overflow: scroll;
  position: relative;
}

::-webkit-scrollbar {
  display: none;
}

.lrc {
  width: 100%;
  position: absolute;
  top: 0;
  background-color: rgba(66, 66, 66,0.1);
  overflow: auto;
  color: #555;
  font-size: 14px;
  border-left: none;
}
.active {
  color: rgb(219, 115, 115) !important;
}
li {
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.each {
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.choose {
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  color: red;
}
</style>
